<template>
  <el-dialog
    width="100%"
    top="0px"
    :fullscreen="true"
    :title="this.title"
     class="label_font"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="170px">


    <el-row   v-if="false" >
      <el-col :span="12"   >
            <el-form-item label="抵押权人名称" prop="dyqrmc" class="label_font">

                  <el-select
                    v-model="dataForm.dyqrmc"
                            :disabled="isInputDisabled()"
                    clearable
                    filterable
                    style="width:100%"
                    remote
                
                    placeholder="抵押权人名称"
                    :remote-method="remoteMethod2"
                    :loading="loading">
                    <el-option
                      v-for="item in list"
                      :key="item.branchid"
                      :label="item.branchname"
                      :value="item.branchid">
                    </el-option>
                  </el-select>

            </el-form-item>
      </el-col>


      <el-col :span="12" v-if="true">
          <el-form-item label="抵押权人类型" prop="dyqrlx" class="label_font">
            <el-select v-model="dataForm.dyqrlx" placeholder="抵押权人类型" 
             :disabled="isInputDisabled()"
              style="width:100%" >
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row   v-if="false"  >

      <el-col :span="12">
          <el-form-item label="抵押权人证件类型" prop="dyqrzjlx" class="label_font">
            <el-select v-model="dataForm.dyqrzjlx" placeholder="抵押权人证件类型"  
            :disabled="isInputDisabled()" 
             style="width:100%" 
            >
            </el-select>
          </el-form-item>
      </el-col>

      <el-col :span="12">
            <el-form-item label="抵押权人证件号码" prop="dyqrzjhm" class="label_font" >
              <el-input v-model="dataForm.dyqrzjhm" placeholder="抵押权人证件号码" :maxlength="18"  :disabled="isInputDisabled()"  style="100%"></el-input>
            </el-form-item>
      </el-col>

    </el-row>


    <el-row  >
      <el-col :span="12"   >
            <el-form-item label="业务件号" prop="serviceno" class="label_font" >
              <el-input v-model="dataForm.serviceno" placeholder="业务件号"
               :disabled="isInputDisabled()"
               :readonly="true"  style="100%"></el-input>
            </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label=" 不动产登记证明号" prop="realtyno" class="label_font">
            <el-input v-model="dataForm.realtyno" placeholder=" 不动产登记证明号"
              :disabled="isInputDisabled()"
             :readonly="true"  style="100%"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="注销类型" prop="dyfs" class="label_font">
            <el-select v-model="dataForm.dyfs" placeholder="注销类型" :disabled=true style="width:100%">
             <el-option
                v-for="item in dataForm.cancelTypeList"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="注销原因" prop="zxyy" class="label_font">
            <el-select v-model="dataForm.zxyy" placeholder="注销原因" 
              :disabled="step == 1 || isInputDisabled()"  style="width:100%">
             <el-option
                v-for="item in dataForm.cancelReasonList"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="抵押权人名称" prop="dyqrname" class="label_font">
             <el-input v-model="dataForm.dyqrname" placeholder=" 抵押权人名称"   :disabled="isInputDisabled()" :readonly="true"  style="100%"></el-input>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="主债权担保金额(万元)" prop="bdbzqse" class="label_font">
   <el-input v-model="dataForm.bdbzqse" placeholder=" 主债权担保金额(万元)"   :disabled="isInputDisabled()" :readonly="true"  style="100%"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

        <el-row >
      <el-col :span="12">

        <el-form-item label="地市" prop="seRegion">
          <el-select  @change="selectChanged" v-model="dataForm.seRegion" 
           placeholder="地市" style="width:100%"
          :disabled="true || step == 1 || isInputDisabled()"  >
              <el-option
                v-for="item in dataForm.seRegionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="区县" prop="region">
            <el-select  @change="selectChanged2" v-model="dataForm.region"   placeholder="区县" style="width:100%"
            :disabled="true || step == 1 || isInputDisabled()"  >
                <el-option
                  v-for="item in dataForm.regionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>
  

    <el-row>

      <el-col :span="12">
        <el-form-item label="办理点" prop="site" class="label_font">
          <el-select v-model="dataForm.site" placeholder="办理点" style="width:100%" :disabled="step == 1 || isInputDisabled()"   >
                <el-option
                  v-for="item in dataForm.siteList"
                  :key="item.siteno"
                  :label="item.sitename"
                  :value="item.siteno">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="债务人" prop="zwr" class="label_font">
            <el-input v-model="dataForm.zwr" placeholder="债务人"   :disabled="isInputDisabled()" :readonly=true></el-input>
          </el-form-item>
      </el-col>

    </el-row>    

    <el-row>

      <el-col :span="12">
          <el-form-item label="债务履行开始日期" prop="zwlxqssj" class="label_font">
            <el-date-picker v-model="dataForm.zwlxqssj" placeholder="债务履行开始日期"   :disabled="isInputDisabled()" :readonly="true"  
           type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"  style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="债务履行结束日期" prop="zwlxjssj" class="label_font">
            <el-date-picker v-model="dataForm.zwlxjssj" placeholder="债务履行开始日期"    :disabled="isInputDisabled()" :readonly="true" 
             type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%" ></el-date-picker>
          </el-form-item>
      </el-col>

    </el-row>


    <el-row>
      <el-col :span="12">
        <el-form-item label="抵押权人证件类别" prop="dyqrzjlb" class="label_font">
          <el-select v-model="dataForm.dyqrzjlb" placeholder="抵押权人证件类别" style="width:100%" :disabled=true >
                <el-option
                  v-for="item in dataForm.zjlbList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="抵押权人证件号码" prop="dyqrzjhm" class="label_font">
            <el-input v-model="dataForm.dyqrzjhm" placeholder="抵押权人证件号码"   :disabled="isInputDisabled()" :readonly=true></el-input>
          </el-form-item>
      </el-col>
    </el-row>  

    <el-row>

      <el-col :span="12">
          <el-form-item label="代理人电话" prop="dlrdh" class="label_font">
            <el-input v-model="dataForm.dlrdh"  
              placeholder="回车自动回显代理人信息"    
              @keyup.enter.native="queryDyqr"
             :disabled="isInputDisabled()" ></el-input>
          </el-form-item>
      </el-col>

      <el-col :span="12">
          <el-form-item label="抵押权人代理人名称" prop="dyrdlrmc" class="label_font">
            <el-input v-model="dataForm.dyrdlrmc"  :disabled="isInputDisabled()" placeholder="抵押权人代理人名称"></el-input>
          </el-form-item>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="12">
          <el-form-item label="抵押权人代理人证件类型" prop="dyrdlrzjlx" class="label_font">
            <el-select v-model="dataForm.dyrdlrzjlx"  :disabled="isInputDisabled()" placeholder="抵押权人代理人证件类型" style="width:100%">
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item label="抵押权人代理人证件号码" prop="dyrdlrzjhm" class="label_font">
            <el-input v-model="dataForm.dyrdlrzjhm"  :disabled="isInputDisabled()" placeholder="抵押权人代理人证件号码"></el-input>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="询问：是否真实表示" prop="left1" class="label_font">
            <el-radio-group v-model="dataForm.left1"  :disabled="step == 1 || isInputDisabled()"  >
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
        </el-form-item>
      </el-col>

            <el-col :span="12">
        <el-form-item label="询问：是否共有房屋" prop="left2" class="label_font">
            <el-radio-group v-model="dataForm.left2"  :disabled="step == 1 || isInputDisabled()"  >
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>  

    <el-row>
      <el-col :span="12">
        <el-form-item label="审核结果" prop="checkresult" 
           :class="{ 'is-required': step == 1 }"
          class="label_font" v-if="step == 1">
            <el-radio-group v-model="dataForm.checkresult"   >
               <el-radio label="1">审核通过</el-radio>
               <el-radio label="2">退回信息补正</el-radio>
               <el-radio label="3">退回资料补正</el-radio>
             </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="审核不通过理由" prop="rejectreason" class="label_font"
         :class="{ 'is-required': step == 1 && dataForm.checkresult == 2  || dataForm.checkresult == 3}"
         v-if="step == 1 && dataForm.checkresult == 2 || dataForm.checkresult == 3">
          <el-input v-model="dataForm.rejectreason" placeholder="审核不通过理由" ></el-input>
        </el-form-item>
      </el-col>
    </el-row> 


    <el-row>
      <el-col :span="12">
        <el-form-item label="附记" prop="fj" class="label_font">
              <el-input v-model="dataForm.fj" placeholder="附记" :disabled="isInputDisabled()"  style="width:100%" ></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="12">
            <el-form-item label="是否电子归档件" prop="isdzyxyw"  class="label_font">
               <el-select v-model="dataForm.isdzyxyw" placeholder="是否电子归档件" style="width:100%"  :disabled="isInputDisabled()"  >
                        <el-option
                        :key="'0'"
                        :label="'否'"
                        :value="'0'" >
                        </el-option>
                        <el-option
                        :key="'1'"
                        :label="'是'"
                        :value="'1'">
                        </el-option>
               </el-select>
            </el-form-item>  
      </el-col>
    </el-row>


     <el-row v-if="dataForm.dyfs=='1'  ||  dataForm.dyfs=='2'">
<el-col>
  <div>

        <table width='100%' border="1"  cellspacing="0"  >
                                        <tr>
                                            <td rowspan="8" align="center"><b>影像件:</b></td>
                                        </tr>
                                        <tr>

                                            <td>文件编码01：不动产抵押权登记申请书（签章） <font color="red"><b></b></font></td>
                                            <td>
                                                 <div style="width:300px;"></div>                                               
                                                <el-upload :action="url" 
                                                  ref="upload1"
                                                  :on-success="successHandle1"
                            
                                                 :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  multiple
                                                  :before-upload="beforeUpload"
                                                  :accept="filetype()"

                                                  :file-list="fileList1"
                                                  :show-file-list="true"
                                        
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'01'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile01"
                                           
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>文件编码02：不动产登记证明 <font
                                                    color="red"><b></b></font></td>
                                            <td>
                                              <el-upload :action="url" 
                                          
                                                  :on-success="successHandle2"
                                                  ref="upload2"
                                                  :file-list="fileList2"

                                                  :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  accept=".PDF,.pdf"

                                                  :show-file-list="true"
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'02'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile02"
                                                  
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>
                                        
                                                                                <tr>
                                            <td>文件编码03：债权消灭的材料 <font color="red"><b></b></font></td>
                                            <td>
                                                                                                <el-upload :action="url" 
                                          
                                                  :on-success="successHandle3"
                                                  ref="upload3"
                                                  :file-list="fileList3"

                                                  :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  accept=".PDF,.pdf"

                                                  :show-file-list="true"
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'03'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile03"
                                               
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>

          <tr>
                                            <td>文件编码04：申请人身份证明材料（提供抵押人身份证明材料 ，或 抵押人出具的委托公证书） <font
                                                    color="red"><b></b></font></td>
                                            <td>
                                                                                                <el-upload :action="url" 
                                          
                                                  :on-success="successHandle2"
                                                  ref="upload4"
                                                  :file-list="fileList2"

                                                  :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  accept=".PDF,.pdf"

                                                  :show-file-list="true"
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'04'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile04"
                                                  
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>

                                    </table>
  </div>
</el-col></el-row>


     <el-row v-if="dataForm.dyfs=='3'">
<el-col>
  <div>

        <table width='100%' border="1"  cellspacing="0"  >
                                        <tr>
                                            <td rowspan="8" align="center" width="80px"><b>待上传材料:</b></td>
                                        </tr>
                                        <tr>

                                            <td>文件编码01：不动产抵押权登记申请书（签章） <font color="red"><b></b></font></td>
                                            <td>
                                                 <div style="width:300px;"></div>                                               
                                                <el-upload :action="url" 
                                                  ref="upload1"
                                                  :on-success="successHandle1"
                            
                                                 :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  multiple
                                                  :before-upload="beforeUpload"
                                                  :accept="filetype()"

                                                  :file-list="fileList1"
                                                  :show-file-list="true"
                                        
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'01'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile01"
                                           
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>文件编码02：申请人身份证明材料（提供抵押人身份证明材料 ，或 抵押人出具的委托公证书） <font
                                                    color="red"><b></b></font></td>
                                            <td>
                                                                                                <el-upload :action="url" 
                                          
                                                  :on-success="successHandle2"
                                                  ref="upload2"
                                                  :file-list="fileList2"

                                                  :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  multiple
                                                  :before-upload="beforeUpload"
                                                  :accept="filetype()"

                                                  :show-file-list="true"
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'02'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile02"
                                                
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>
                                        
                                                                                <tr>
                                            <td>文件编码03：债权消灭的材料 <font color="red"><b></b></font></td>
                                            <td>
                                                                                                <el-upload :action="url" 
                                          
                                                  :on-success="successHandle3"
                                                  ref="upload3"
                                                  :file-list="fileList3"

                                                  :disabled="isFileDisabled()"
                                                 :on-preview="handlePreview"
                                                  multiple
                                                  :before-upload="beforePicUpload"
                                                  :accept="pictype()"

                                                  :show-file-list="true"
                                                  :on-exceed="handleExceed"
                                                  :data="{seqno:this.seqno, fileCode:'03'}"
                                                  :before-remove="beforeRemove"
                                                  :on-remove="removeFile03"
                                              
                                            >
                                              <el-button size="small" type="primary"  v-if="!isFileDisabled()" >点击上传</el-button>
                                            </el-upload>
                                            </td>
                                        </tr>

         

                                    </table>
  </div>
</el-col></el-row>


    <el-row>
      <el-col>

  <table width='100%' border="1"  cellspacing="0" style="margin-top:-1px;" >
                                        <tr>
                                            <td rowspan="10" align="center" width="80px"><b>已备案材料:</b></td>
                                        </tr>
                                        <tr>

                                            <td>营业执照</td>
                             
                             

                                            <td width="50%">
                                                  <div v-if="url1 == ''" class="wba">未备案</div>
                                                   <div class="demo-image__preview" v-if="url1 != ''">
                                                      <el-image 
                                                        style="width: 100px; height: 100px"
                                                        :src="url1" 
                                                        :preview-src-list="srcList">
                                                      </el-image>
                                                  </div>                                           
                                             
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>介绍信
                                                 
                     
                                            
                                            </td>
                                            <td>
                                             <div v-if="url2 == ''" class="wba">未备案</div>
                                              <div class="demo-image__preview" v-if="url2 != ''">
                                                      <el-image 
                                                        style="width: 100px; height: 100px"
                                                        :src="url2" 
                                                        :preview-src-list="srcList">
                                                      </el-image>
                                                  </div> 
                                         

                                            </td>
                                        </tr>
                                        <tr>
                                            <td>身份证</td>
                                            <td>
                                                <div v-if="url3 == ''" class="wba">未备案</div>
                                                 <div class="demo-image__preview" v-if="url3 != ''">
                                                      <el-image 
                                                        style="width: 100px; height: 100px"
                                                        :src="url3" 
                                                        :preview-src-list="srcList">
                                                      </el-image>
                                                  </div>        
                                            </td>
                                        </tr>
                                        

                                        <tr>
                                            <td>签名图片
                                            </td>
                                            <td>
                                            <div v-if="url4 == ''" class="wba">未备案</div>
                                             <div class="demo-image__preview" v-if="url4 != ''">
                                                      <el-image 
                                                        style="width: 100px; height: 100px"
                                                        :src="url4" 
                                                        :preview-src-list="srcList">
                                                      </el-image>
                                                  </div>
                                            
                                            </td>
                                        </tr>


                                        <tr>
                                            <td>合同  </td>
                                            <td>
                                                <div v-if="srcHtbaList.length == 0" class="wba">未备案</div>
                                                <div v-if="srcHtbaList.length > 0">
                                                  <div v-for="(item,index) in srcHtbaList" :key="index" class="table-flex" style="float:left;" >
                                                    <el-image style="width: 100px; height: 100px" :src="item" :preview-src-list="srcList"></el-image>
                                                  </div>
                                                </div>
                                              

                                            </td>
                                        </tr>

                                    </table>                            

      </el-col>
    </el-row>



<el-row >
          <el-col :span="24">

    <el-table
      :data="bdcxxList"
      border
      v-loading="dataListLoading"
      type="index"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="realtyunitno"
            header-align="center"
            align="center"
            label="不动产单元号">
        </el-table-column>

        <el-table-column
            prop="realtycertno"
            header-align="center"
            align="center"
            label="不动产权证号">

        </el-table-column>
        <el-table-column
            prop="zl"
            header-align="center"
            align="center"
            label="不动产坐落">
        </el-table-column>

        <el-table-column
            prop="mj"
            header-align="center"
            align="center"

            label="面积">
        </el-table-column>



        </el-table>


          </el-col>
        </el-row>
    <el-row >
    <el-col :span="24">

    <el-table
      :data="dyrList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

        <el-table-column
            prop="MC"
            header-align="center"

            align="center"
            label="抵押人名称">

        </el-table-column>


        <el-table-column
            prop="ZJLB"
            header-align="center"
            align="center"
            label="抵押人证件类别">
        </el-table-column>

        <el-table-column
            prop="ZJHM"
            header-align="center"
            align="center"
            label="抵押人证件号码">
        </el-table-column>

        </el-table>


          </el-col>
        </el-row>


  

    </el-form>
    <span slot="footer" class="dialog-footer"> 
        <el-button type="primary" @click="saveComplete()" v-if="!isInputDisabled()">录入完成</el-button> 
        <el-button type="primary" @click="uploadComplete()" v-if="isFileEnabled()">资料上传完成</el-button> 
        <el-button type="primary" @click="submit()" v-if="isSumbitEnabled()" >提交</el-button>
        <el-button @click="visible = false">返回</el-button>

    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
    var validateCheckresult = (rule, value, callback) => {
        if (!value && this.step == 1) {
          callback(new Error('审核结果不能为空'))
        } else {
          callback()
        }
      }

      var validateRejectreason = (rule, value, callback) => {
        if (!value && this.step == 1) {
          callback(new Error('审核不通过理由不能为空'))
        } else {
          callback()
        }
      }

      return {

        visible: false,
        url: '',
        title: '',

        srcList: [],
        url1: '',
        url2: '',
        url3: '',
        url4: '',
        srcHtbaList: [],

     
        dataListLoading: false,
        dyrList: [],
        bdcxxList: [],
        seqno: 0,
        step: 0,

        fileList1: [],
        fileList2: [],
        fileList3: [],
        fileList4: [],


        dataForm: {
          dyqrmc: '',

          isdzyxyw: '',
          dlrdh: '',
          dyrdlrmc: '',
          dyrdlrzjhm: '',
          dyrdlrzjlx: '',

          seqno: 0,
          serviceno: '',
          checkresult: 0,
          rejectreason: '',
          realtyunitno: '',
          region: '',
          seRegion: '',

          siteList: [],
          zwr: '',
          cancelReasonList: [],
          cancelTypeList:[],
          seRegionList: [],
          regionList:[],
          zjlbList: [],

          dyqrname: '',
          bdbzqse: '',
          dyqrzjhm: '',
          zwlxqssj: '',
          zwlxjssj: '',
          dyqrzjlb: '',
          dyfs: '',

          site: '',

          zxyy: '',

          left1: '',
          left2: '',
          fj: '',
          state: ''

        },
        dataRule: {
          
          rejectreason:[
              { validator: validateRejectreason, trigger: 'blur' }
          ],
          checkresult:[
              { validator: validateCheckresult, trigger: 'blur' }
          ],
          site: [
            { required: true, message: '办理点不能为空', trigger: 'blur' }
          ],
          zxyy: [
            { required: true, message: '注销原因不能为空', trigger: 'blur' }
          ],
          left1: [
            { required: true, message: '是否真实表示不能为空', trigger: 'blur' }
          ],
          left2: [
            { required: true, message: '是否共有房屋不能为空', trigger: 'blur' }
          ],
          seRegion: [
            { required: true, message: '不动产所属地市不能为空', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '不动产所属区县不能为空', trigger: 'blur' }
          ],
          fj: [
            { required: true, message: '附记不能为空', trigger: 'blur' }
          ],
          isdzyxyw:[
            { required: true, message: '是否电子归档件不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      orgid: {
        get () { return this.$store.state.user.orgid }
      }
    },

    methods: {

        pictype(){
          return "image/jpg,image/jpeg"
        },
        filetype(){
          if (this.dataForm.isdzyxyw == 0){
              return "image/jpg,image/jpeg"
          }
          else{
            return ".pdf,.PDF"
          }
        },

        
      remoteMethod2(query) {
   
          this.loading = true;

          this.$http({
            url: this.$http.adornUrl(`/sys/user/branch/search`),
            method: 'get',
            params: this.$http.adornParams({
              "key": query || ''
            })
          }).then(({data}) => {
            this.loading = false;
            if (data && data.code === 0) {
                this.list = data.list;
            }
          })     
          

      },


        initBabsm(){
            this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/query/jbr`),
                method: 'post',
                data: this.$http.adornData({
                  'region': this.dataForm.region,
                  'seRegion': this.dataForm.seRegion,
                  'phone': this.dataForm.dlrdh,
                  'dyqr': this.dataForm.dyqrmc
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.oImages.push(data.dyqrdlr.yxbsm)
                    this.dataForm.dyrdlrmc = data.dyqrdlr.name
                    this.dataForm.dyrdlrzjhm = data.dyqrdlr.idcode

                    this.url2 = this.buildDownloadUrl(data.dyqrdlr.yxbsm + "_" + data.dyqrdlr.fname)
                    console.log(this.url2)
                    this.queryYyzz(data.dyqrdlr.bdcno)
                    this.querySfz(data.dyqrdlr.bdcno, data.dyqrdlr.name+data.dyqrdlr.idcode)
                    this.querySignpic(data.dyqrdlr.bdcno, data.dyqrdlr.name+data.dyqrdlr.idcode)
                    this.queryHtbaList(data.dyqrdlr.bdcno)
                }else{
                  this.$message.error(data.msg)
                  this.url2 = ''
                }

            })
      },

      
      isFileDisabled(){
          return !this.isFileEnabled()
      },

      isFileEnabled(){
          return this.isAuth('bdc:bdcnoticeregist:upload')  &&  (this.dataForm.state == '41'
           || this.dataForm.state == '54' || this.dataForm.state == '51')
      },

      queryYyzz(djzx){
        this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/query/yyzz`),
                method: 'post',
                data: this.$http.adornData({
                  'bdcno': djzx,
                  'dyqr': this.dataForm.dyqrmc
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.url1 = this.buildDownloadUrl(data.yyzz.yxbsm + "_" + data.yyzz.fname)
                    console.log(this.url1)
                    this.oImages.push(data.yyzz.yxbsm)
                }

            })
      },

      checkDyqrPhone(successCallback){
          this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/phone/check`),
                method: 'post',
                data: this.$http.adornData({


                'seRegion': this.dataForm.seRegion,
                'region':  this.dataForm.region,

                  'phone': this.dataForm.dlrdh,
                  'dyqr': this.orgid,
                  'name': this.dataForm.dyrdlrmc,
                  'idcode': this.dataForm.dyrdlrzjhm
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                    if (successCallback){
                      successCallback()
                    }
                }else{
                  this.$message.error(data.msg)
                }

            })
      },

      beforeUpload (file) {
        if (this.dataForm.isdzyxyw == 0){
          if (file.type !== 'image/jpg' && file.type !== 'image/jpeg') {
            this.$message.error('只支持jpg格式的图片！')
              this.check = false
            return false
          }
        }else{
          if (file.type !== 'application/pdf' && file.type !== 'application/PDF') {
            this.$message.error('请上传pdf文件')
              this.check = false
            return false
          }
        }
           this.check = true 
      },

      querySignpic(djzx, fname){
        this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/query/signpic`),
                method: 'post',
                data: this.$http.adornData({
                  'bdcno': djzx,
                  'fname': '手写签名-'+fname,
                  'dyqr': this.dataForm.dyqrmc
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.url4 = this.buildDownloadUrl(data.signpic.yxbsm + "_" + data.signpic.fname)
                    console.log(this.url4)
                    this.oImages.push(data.signpic.yxbsm)
                }

            })
      },

      queryHtbaList(djzx){
        this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/query/htba`),
                method: 'post',
                data: this.$http.adornData({
                  'bdcno': djzx
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                  this.oImages.push(data.yxbsm)
                  for (var i = 0; i < data.htbaList.length; i++){
                    var htba = data.htbaList[i]
                    var url = this.buildDownloadUrl(htba)
                    this.srcHtbaList.push(url)
                    console.log(url)
                  }
                    
                }

            })
      },

      querySfz(djzx, fname){
        this.$http({
                url: this.$http.adornUrl(`/bdc/bdcrecordimage/query/sfz`),
                method: 'post',
                data: this.$http.adornData({
                  'bdcno': djzx,
                  'fname': '身份证-'+fname,
                  'dyqr': this.dataForm.dyqrmc
                })
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.url3 = this.buildDownloadUrl(data.sfz.yxbsm + "_" + data.sfz.fname)
                    console.log(this.url3)
                    this.oImages.push(data.sfz.yxbsm)
                }

            })
      },

      queryDyqr(){

        if (!this.dataForm.seRegion){
          this.$message.error("请选择所属地市")
          return
        }

        if (!this.dataForm.region){
          this.$message.error("请选择所属区县")
          return
        }



        this.initBabsm()

      },

      buildDownloadUrl(name){
            var token = this.$cookie.get('token')
        　　var url = this.$http.adornUrl('/bdc/bdcrecordimage/downFile/' + name  + ".jpg" + '?token=' + token)
            this.srcList.push(url)
            return url;
      },

      beforePicUpload (file) {
        
          if (file.type !== 'image/jpg' && file.type !== 'image/jpeg') {
            this.$message.error('只支持jpg格式的图片！')
              this.check = false
            return false
          }
        
           this.check = true 
      },


      init (step, id, ywjh, realtyno, region) {
        this.remoteMethod2()
        this.oImages = []
        this.url3 = ''
        this.url2 = '',
        this.url1 = '',
        this.url4 = '',
        this.srcList = []
        this.srcHtbaList = [] 

        this.dataForm.seqno = 0
        this.seqno = 0
        if (step == 0){
           this.dataForm.seqno = id
        }else{
          this.seqno = id
        }

        this.dataForm.state = ''
        this.dataForm.checkresult = 0
        this.dataForm.rejectreason = ''

        this.fileList1 = [];
        this.fileList2 = [];
        this.fileList3 = [];
        this.fileList4 = [];
        this.url = this.$http.adornUrl(`/bdc/cancelregist/upload?token=${this.$cookie.get('token')}`)

        this.visible = true
        this.dataForm.gettype = '电子证明';
        this.step = step;
        this.title = '抵押权注销登记';
        if (step == 1){
           this.title += '（审核提交）';
        }else if (step == 2){
           this.title = '抵押权注销登记 （重新提交）';
        }else if (step == 51){
           this.title = '抵押权注销登记 （信息补正）';
        }else if (step == 52){
           this.title = '抵押权注销登记 （重新提交）';
        }
        
        this.$http({
          url: this.$http.adornUrl(`/bdc/cancelregist/item/list`),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataForm.cancelReasonList = data.cancelReasonList
                this.dataForm.seRegionList = data.regionList
                this.dataForm.cancelTypeList = data.cancelTypeList
                this.dataForm.zjlbList = data.idTypeList
                
                this.dataForm.dyrdlrzjlx = '个人';
                this.dataForm.dyqrlx = '单位';
                this.dataForm.dyqrzjlx = '统一社会信用代码';
            }
        })

        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
      
            this.dataListLoading = true;
            if (step == 0){
              this.$http({
                url: this.$http.adornUrl(`/bdc/cancelregist/query/realtyinfo`),
                method: 'post',
                data: this.$http.adornData({
                  'cxorgid' : id,
                  'ywjh': ywjh,
                  'bdcdjzmh': realtyno,
                  'region': region
                })
              }).then(({data}) => {
                if (data && data.code === 0) {

                  this.dataForm.seqno = data.realtyinfo.serialno
                  this.dataForm.seRegion = data.seRegion
                  var region = data.realtyinfo.region
                  this.selectChanged(this.dataForm.seRegion)
                  this.selectChanged2(region)
                  this.dataForm.region = region

                  this.dataForm.serviceno = data.realtyinfo.serviceno
                  this.dataForm.realtyno = data.realtyinfo.realtyno

                  this.dataForm.dyqrname = data.realtyinfo.dyqrname
                  this.dataForm.bdbzqse = data.realtyinfo.bdbzqse
                  this.dataForm.dyqrzjhm = data.realtyinfo.dyqrzjhm
                  this.dataForm.zwlxqssj = data.realtyinfo.zwlxqssj
                  this.dataForm.zwlxjssj = data.realtyinfo.zwlxjssj
                  this.dataForm.dyqrzjlb = data.realtyinfo.dyqrzjlb
                  this.dataForm.dyfs = data.realtyinfo.dyfs
               

                  this.dyrList = data.dyrList
                  this.bdcxxList = data.bdcxxList
                  this.dataForm.zwr = data.zwr

                  this.dataForm.dyqrmc = data.dyqrmc

                }
                this.dataListLoading = false;
              })
            }
            else{
                  var url = this.step == 2 ? '/bdc/cancelregist/info/' : '/bdc/cancelcheck/info/'
                  this.$http({
                  url: this.$http.adornUrl(url + this.seqno),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {
                  this.dataForm.dyqrmc = data.dyqrmc
                  this.dataForm.seRegion = data.bdcMortgregist.seRegion
                  var region = data.bdcMortgregist.region
                  this.selectChanged(this.dataForm.seRegion)
                  this.selectChanged2(region)
                  this.dataForm.region = region

                  this.dataForm.serviceno = data.bdcMortgregist.ydywjh
                  this.dataForm.realtyno = data.bdcMortgregist.ydbdcdjzmh

                  this.dataForm.dyqrname = data.dyqr.MC
                  this.dataForm.bdbzqse = data.bdcMortgregist.bdbzqse
                  this.dataForm.dyqrzjhm = data.dyqr.ZJHM
                  this.dataForm.zwlxqssj = data.bdcMortgregist.zwlxqssj
                  this.dataForm.zwlxjssj = data.bdcMortgregist.zwlxjssj
                  this.dataForm.dyqrzjlb = data.dyqr.ZJLB
                  this.dataForm.dyfs = data.dyfs
                  this.dataForm.site = data.bdcMortgregist.bld

                  this.dyrList = data.dyrList
                  this.bdcxxList = data.bdcxxList
                  this.dataForm.zwr = data.zwr
                  if (data.dyqrXwbl){
                     this.dataForm.left1 = data.dyqrXwbl.SFYYZS
                     this.dataForm.left2 = data.dyqrXwbl.SFGY
                  }

                  this.dataForm.zxyy = data.bdcMortgregist.zxyy
                  this.dataForm.fj = data.bdcMortgregist.fj

                  this.dataForm.state = data.bdcMortgregist.state

                  this.dataForm.dyrdlrmc = data.dyrdlr.MC
                  if (data.dyrdlr.RYLX){
                    this.dataForm.dyrdlrlx = data.dyrdlr.RYLX
                  }
                  else{
                     this.dataForm.dyrdlrlx = '个人'
                  }
                  if (data.dyrdlr.ZJLB){
                     this.dataForm.dyrdlrzjlx = data.dyrdlr.ZJLB
                  }else{
                     this.dataForm.dyrdlrzjlx = '身份证'
                  }
                 
                  this.dataForm.dyrdlrzjhm = data.dyrdlr.ZJHM
                  this.dataForm.dlrdh = data.dyrdlr.LXDH

                  this.dataForm.isdzyxyw = data.bdcMortgregist.isdzyxyw

                  this.oImages = []

                    if (data.file01){
                      var self = this
                      data.file01.forEach(function(item){
                        self.fileList1.push({'name':item, 'url': self.seqno + '_01_' + item})
                      })
                      
                    }
                    if (data.file02){
                      var self = this
                      data.file02.forEach(function(item){
                        self.fileList2.push({'name':item, 'url': self.seqno + '_02_' + item})
                      })
  
                    }
                    if (data.file03){
                      var self = this
                      data.file03.forEach(function(item){
                        self.fileList3.push({'name':item, 'url': self.seqno + '_03_' + item})
                      })
                 
                    }
                    if (data.file04){
                      var self = this
                      data.file04.forEach(function(item){
                        self.fileList4.push({'name':item, 'url': self.seqno + '_04_' + item})
                      })
                      
                    }

                  }
                  this.initBabsm()
                  this.dataListLoading = false;
                })
            }
            
          
        })
      },





      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      },

      selectChanged2(value){
          this.dataForm.site = ''
          this.$http({
          url: this.$http.adornUrl(`/bdc/bdcsiteinfo/query/` + value),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.siteList = data.siteList
            }
        })
      },

      
      isInputDisabled(){
          return !this.isAuth('bdc:bdccancelregist:save') 
          || this.dataForm.state != '' && this.dataForm.state != '00' && this.dataForm.state != '11'
           && this.dataForm.state != '53'
      },



      isFileDisabled(){
          return !this.isFileEnabled()
      },

      isFileEnabled(){
          return this.isAuth('bdc:bdccancelregist:upload')  &&  (this.dataForm.state == '41'
           || this.dataForm.state == '54' || this.dataForm.state == '51')
      },


      isSumbitEnabled(){

          return (this.dataForm.state=='52' || this.dataForm.state=='41')   && this.isAuth('bdc:bdccancelregist:commit') 

      },
       // 上传成功
      successHandle (response, file, callback, successCallbak) {

        if (response && response.code === 0) {
            this.$message({
              message: '上传文件成功',
              type: 'success',
              duration: 1500
            });
            if (!this.seqno){
              this.seqno = response.seqno
            }
            if (successCallbak){
              successCallbak(file)
            }

        } else {
          this.$message.error(response.msg)
            if (callback){
              callback();
            }
        }
      },

      handlePreview(file){
          if (!file.url){
            return
          }
          console.log(file.url)
          var token = this.$cookie.get('token')
      　　var url = this.$http.adornUrl('/bdc/cancelregist/downFile/' + file.url + '?token=' + token)
          window.open(url)
      },

      // 上传成功
      successHandle1 (response, file) {
        var self = this;
        this.successHandle(response, file, function(){
             self.$refs.upload1.clearFiles()
        }, function(file){
          file.url = self.seqno + '_01_' + file.name;
          console.log(file)
        })
        
      },
      successHandle2 (response, file) {
        var self = this;
        this.successHandle(response, file, function(){
            self.$refs.upload2.clearFiles()
        }, function(file){
          file.url = self.seqno + '_02_' + file.name;
          console.log(file)
        })
        
      },
      successHandle3 (response, file) {
        var self = this;
        this.successHandle(response, file, function(){
            self.$refs.upload3.clearFiles()
        }, function(file){
          file.url = self.seqno + '_03_' + file.name;
          console.log(file)
        })       
      },

      successHandle4 (response, file) {
        var self = this;
        this.successHandle(response, file, function(){
            self.$refs.upload4.clearFiles()          
        }, function(file){
          file.url = self.seqno + '_04_' + file.name;
          console.log(file)
        })
        
      },

  uploadComplete(){
        // if (this.dataForm.dyfs == '3'){
        //     if (this.$refs.upload1.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码01")
        //         return;
        //     }

        //     if (this.$refs.upload2.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码02")
        //         return;
        //     }

        //     if (this.$refs.upload3.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码03")
        //         return;
        //     }
        // }else{
        //     if (this.$refs.upload1.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码01")
        //         return;
        //     }

        //     if (this.$refs.upload2.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码02")
        //         return;
        //     }

        //     if (this.$refs.upload3.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码03")
        //         return;
        //     }
        //     if (this.$refs.upload4.uploadFiles.length == 0){
        //         this.$message.error("请上传文件编码04")
        //         return;
        //     }
        // }
           
        

        this.tip = "正在保存资料"
        this.submitLoading = true;
        this.$http({
              url: this.$http.adornUrl('/bdc/cancelregist/uploadComplete'),
              method: 'post',
              data: this.$http.adornData({
                'seqno': this.seqno,
                'btype': this.btype
              })
            }).then(({data}) => {
              if (data && data.code === 0) {

                this.$message({
                  message: '抵押注销资料上传完成',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {

                      this.visible = false
                      this.$emit('refreshDataList')
                    
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
              this.submitLoading = false;
            }) .catch(err => {
              this.submitLoading = false;
              console.error(err);
              this.$message.error('系统异常')              
            }); 

      },

      // 上传之前
      beforeUploadHandle (file) {
          if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            this.$message.error('只支持jpg、png、gif格式的图片！')
            return false
          }
      },

      handleExceed(files, fileList) {
        this.$message.warning('只能上传一个文件');
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },


      removeFile04(file, fileList) {
        this.removeFile(file, fileList, '04',function(){
          this.fileList4 = fileList
        })
      },

      removeFile03(file, fileList) {
        this.removeFile(file, fileList, '03',function(){
          this.fileList3 = fileList
        })
      },

      removeFile02(file, fileList) {
        this.removeFile(file, fileList, '02',function(){
          this.fileList2 = fileList
        })
      },

      removeFile01(file, fileList) {
        this.removeFile(file, fileList, '01',function(){
          this.fileList1 = fileList
        })
      },

      removeFile(file, fileList, filecode, callback){
          this.$http({
          url: this.$http.adornUrl(`/bdc/cancelregist/remove`),
              method: 'post',
              data: this.$http.adornData({
                'seqno': this.seqno,
                'fileCode': filecode,
                'fileName': file.name
              })
          }).then(({data}) => {
            if (data && data.code === 0) {
               this.$message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1500
                })
               
            }else{
               this.$message.error(data.msg)
              if (callback){
                  callback();
               }
            }
        })
      },

     
      downApply(){

      },

      saveComplete(){

  this.$refs['dataForm'].validate((valid) => {
            if (valid) {
               
        var djry = [{
                  'TYPE': '09',
                  'RYLX': '1',
                  'ZJLB': '1',
                  'MC': this.dataForm.dyrdlrmc,
                  'ZJHM': this.dataForm.dyrdlrzjhm,
                  'LXDH': this.dataForm.dlrdh
              }
              // ,
              // {
              //     'TYPE': '03',
              //     'RYLX': '2',
              //     'ZJLB': '13',
              //     'MC': this.dataForm.dyqrmc,
              //     'ZJHM': this.dataForm.dyqrzjhm,
              //     'LXDH': this.dataForm.dyqrlxdh
              // }
              
              ];



              this.$http({
                url: this.$http.adornUrl('/bdc/cancelregist/submitToCheck'),
                method: 'post',
                data: this.$http.adornData({
                  'seqno': this.seqno,
                  'bld': this.dataForm.site,
                  'seRegion': this.dataForm.seRegion,
                  'region': this.dataForm.region,
                  'realtyinfono':this.dataForm.seqno,
                  'sfyyzs': this.dataForm.left1,
                  'sfgy': this.dataForm.left2,
                  'zxyy': this.dataForm.zxyy,
                  'djryList':djry,
                  'fj': this.dataForm.fj,
                  'isdzyxyw': this.dataForm.isdzyxyw
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })   
                
            }
            else{
              this.$message.error("参数校验失败")
            }
          })

      },

      doSubmit(){
            this.$http({
                url: this.$http.adornUrl('/bdc/cancelcheck/docheck'),
                method: 'post',
                data: this.$http.adornData({
                  'seqno': this.seqno,
                  'checkresult': this.dataForm.checkresult,
                  'rejectreason': this.dataForm.rejectreason,
                  'fj': this.dataForm.fj
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                      this.visible = false
                      this.$emit('refreshDataList')
                    }
                  })
                } else {
                  this.$message.error(data.msg)
                }
              })
      },

      submit(){

        this.$refs['dataForm'].validate((valid) => {
            if (valid) {

                  if ('1' == this.dataForm.checkresult){
                      this.$confirm('此操作将提交给登记中心, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                      }).then(() => {
                        this.doSubmit()
                      }).catch(() => {
                        
                      });
                  }
                  else{
                    this.doSubmit()
                  }

            }else{
              this.$message.error("参数校验失败")
            }
  })
        
      }


    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #313b50;
    cursor: not-allowed;
}

.wba{
  color:red;
  font-size: 16px;
}
</style>